<template>
	<view class="container">
		<view class="order_tabs">
			<u-subsection :list="tabs" :current="tabsActive" @change="changeTabsHandler"></u-subsection>
		</view>
		<!-- 业主电费 -->
		<view class="owner" v-if="tabsActive===0">
			<u-list @scrolltolower="pullDownHandler" height="100%">
				<u-list-item v-for="(item, index) in ownerOrders" :key="index">
					<view class="list_item" @click="getDetail(item)">
						<view class="item_cell">
							<text class="tip">订单编号:</text>
							<text class="content important">{{item.orderNo}}</text>
						</view>
						<view class="item_cell">
							<text class="tip">业主名称:</text>
							<text class="content">
								<u-tag :text="item.ownerName" type="warning" plain plainFill></u-tag>
							</text>
						</view>
						<view class="item_cell">
							<text class="tip">更新后编号:</text>
							<text class="content">
								<u-tag :text="item.projectUpdateNumber" type="primary" plain plainFill></u-tag>
							</text>
						</view>
						<view class="item_cell">
							<text class="tip">用电量:</text>
							<text class="content">
								<u-tag :text="item.electricityConsumption" type="info" plain plainFill></u-tag>
							</text>
						</view>
						<u-icon name="arrow-right-double"></u-icon>
						<view class="status_tag">
							<u-tag v-if="item.paymentStatusCode === 0" type="info" text="待订单确认" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 1" type="primary" text="待发起审批" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 2" type="warning" text="非标待审批" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 3" type="primary" text="审批中" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 4" type="success" text="已支付" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 6" type="error" text="已驳回" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 7" type="warning" text="待非标确认" size="mini"
								plain></u-tag>
						</view>
						<view class="target_tag">
							<u-tag v-if="item.isTarget" type="error" text="非标" size="mini" plain></u-tag>
						</view>
					</view>
				</u-list-item>
				<u-loadmore v-if="ownerOrders.length >= ownerOrderTotal" status="nomore" />
			</u-list>
		</view>
		<!-- 运营商电费 -->
		<view class="operator" v-if="tabsActive===1">
			<u-list @scrolltolower="getList" height="100%">
				<u-list-item v-for="(item, index) in operatorOrders" :key="index">
					<view class="list_item" @click="getDetail(item)">
						<view class="item_cell">
							<text class="tip">订单编号:</text>
							<text class="content important">{{item.orderNo}}</text>
						</view>
						<view class="item_cell">
							<text class="tip">运营商:</text>
							<text class="content">
								<u-tag :text="item.ownerName" type="warning" plain plainFill></u-tag>
							</text>
						</view>
						<view class="item_cell">
							<text class="tip">更新后编号:</text>
							<text class="content">
								<u-tag :text="item.projectUpdateNumber" type="primary" plain plainFill></u-tag>
							</text>
						</view>
						<view class="item_cell">
							<text class="tip">用电量:</text>
							<text class="content">
								<u-tag :text="item.electricityConsumption" type="info" plain plainFill></u-tag>
							</text>
						</view>
						<u-icon name="arrow-right-double"></u-icon>
						<view class="status_tag">
							<u-tag v-if="item.paymentStatusCode === 0" type="info" text="待订单确认" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 1" type="primary" text="待审批" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 2" type="warning" text="非标待审批" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 3" type="primary" text="已申请待开票" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 4" type="success" text="已开票" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 5" type="success" text="已回款" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 6" type="error" text="已驳回" size="mini"
								plain></u-tag>
							<u-tag v-if="item.paymentStatusCode === 7" type="warning" text="未申请开票" size="mini"
								plain></u-tag>
						</view>
						<view class="target_tag">
							<u-tag v-if="item.isTarget" type="error" text="非标" size="mini" plain></u-tag>
						</view>
					</view>
				</u-list-item>
				<u-loadmore v-if="operatorOrders.length >= operatorOrderTotal" status="nomore" />
			</u-list>
		</view>
		<u-empty v-if="tabsActive===0 ? !ownerOrders.length : !operatorOrders.length" mode="message" text="无内容"
			iconColor="#5976ba"></u-empty>
	</view>
</template>

<script>
	import {
		ownerEleOrderList,
		operatorEleOrderList
	} from '@/apis/eleOrder.js'
	export default {
		data() {
			return {
				tabs: ['业主订单', '运营商订单'],
				tabsActive: 0,
				pageForm: {
					page: 1,
					size: 20
				},
				ownerOrders: [],
				ownerOrderTotal: 0,
				operatorOrders: [],
				operatorOrderTotal: 0
			}
		},
		created() {
			this.getOrderList()
		},
		methods: {
			changeTabsHandler(index) {
				this.tabsActive = index
			},
			pullDownHandler() {
				if (this.tabsActive === 0) {
					if (this.ownerOrders.length && this.ownerOrders.length >= this.ownerOrderTotal) return
					if (this.ownerOrders.length && this.ownerOrders.length < this.ownerOrderTotal) this.queryForm
						.page += 1
				} else {
					if (this.operatorOrders.length && this.operatorOrders.length >= this.operatorOrderTotal) return
					if (this.operatorOrders.length && this.operatorOrders.length < this.operatorOrderTotal) this
						.queryForm.page += 1
				}
				this.getOrderList()
			},
			async getOrderList() {
				if (this.tabsActive === 0) {
					const res = await ownerEleOrderList(this.pageForm)
					this.ownerOrders = res.data.list
					this.ownerOrderTotal = res.data.total
				} else {
					const res = await operatorEleOrderList(this.pageForm)
					this.operatorOrders = res.data.list
					this.operatorOrderTotal = res.data.total
				}
			},
			getDetail(row) {
				this.tabsActive === 0 ?
					uni.navigateTo({
						url: `/pages/eleOrder/ownerOrderDetail?data=${JSON.stringify(row)}`
					}) :
					uni.navigateTo({
						url: `/pages/eleOrder/operatorOrderDetail?data=${JSON.stringify(row)}`
					})
			},
		},
		watch: {
			tabsActive(newVal, oldVal) {
				this.getOrderList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 20rpx;
		display: flex;
		flex-direction: column;

		.order_tabs {
			width: 100%;
			height: 4%;
		}

		.owner {
			width: 100%;
			padding: 20rpx 10rpx;
			height: 94%;
		}

		.operator {
			width: 100%;
			padding: 20rpx 10rpx;
			height: 94%;
		}

		.list_item {
			margin: 15rpx 0;
			padding: 20rpx;
			border: 5rpx solid #00188f;
			border-radius: 20rpx;
			position: relative;

			.item_cell {
				padding: 10rpx 0;
				display: flex;
				align-items: center;

				.tip {
					margin-right: 10rpx;
					font-size: 28rpx;
					color: #8c8c8c;
				}

				.content {
					max-width: 300rpx;
					margin-left: 15rpx;
					font-size: 28rpx;
					color: #8c8c8c;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					::v-deep .u-tag__text {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.content.important {
					font-size: 34rpx;
					font-weight: 700;
					color: #0050b3;
				}

				&.has_child {
					justify-content: space-between;

					.cell_child {
						flex: 1;
						display: flex;
						align-items: center;
					}
				}
			}

			.status_tag {
				position: absolute;
				right: 20rpx;
				top: 20rpx;

				::v-deep .u-tag__text {
					font-size: 28rpx
				}
			}

			.target_tag {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;

				::v-deep .u-tag__text {
					font-size: 24rpx
				}
			}

			::v-deep .u-icon--right {
				position: absolute;
				right: 10rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 32rpx;
				color: #5976ba;
			}
		}
	}
</style>